<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>z-admin</title>
        <header th:replace="sys/head :: head " />
    </head>
    <body class="index">
        <!-- 顶部开始 -->
        <nav class="container">
            <div class="logo">
                <a href="index">z-admin</a></div>
            <div class="left_open">
                <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>
            </div>
            <ul class="layui-nav left fast-add" lay-filter="">
                <p class="layui-nav-item ">当前公众号</p>
                <li class="layui-nav-item" id="account_nav">
                    <a href="javascript:">
                        <span id="nowWx">未获取到账号</span>
                    </a>
                    <dl class="layui-nav-child" id="wx-nav">

                    </dl>
                </li>
            </ul>
            <ul class="layui-nav left fast-add" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;">+新增</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">
                                <i class="iconfont">&#xe6a2;</i>弹出最大化</a></dd>
                        <dd>
                            <a onclick="xadmin.open('弹出自动宽高','http://www.baidu.com')">
                                <i class="iconfont">&#xe6a8;</i>弹出自动宽高</a></dd>
                        <dd>
                            <a onclick="xadmin.open('弹出指定宽高','http://www.baidu.com',500,300)">
                                <i class="iconfont">&#xe6a8;</i>弹出指定宽高</a></dd>
                        <dd>
                            <a onclick="xadmin.add_tab('在tab打开','member-list.html')">
                                <i class="iconfont">&#xe6b8;</i>在tab打开</a></dd>
                        <dd>
                            <a onclick="xadmin.add_tab('在tab打开刷新','member-del.html',true)">
                                <i class="iconfont">&#xe6b8;</i>在tab打开刷新</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav right" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;" id="nickName">user</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="xadmin.open('个人信息',appPath + '/sys/user/toEdit?id='+localStorage.getItem('userId'))">个人信息</a></dd>
                        <dd>
                            <a onclick="xadmin.open('切换帐号',appPath + '/login.html')">切换帐号</a></dd>
                        <dd>
                            <a th:href="@{'/logout'}">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item to-index">
                    <a href="/">前台首页</a></li>
            </ul>
        </nav>
        <!-- 顶部结束 -->
        <!-- 中部开始 -->
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">

                </ul>
            </div>
        </div>
        <!-- <div class="x-slide_left"></div> -->
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
                <ul class="layui-tab-title">
                    <li class="home">
                        <i class="layui-icon">&#xe68e;</i>我的桌面</li></ul>
                <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
                    <dl>
                        <dd data-type="this">关闭当前</dd>
                        <dd data-type="other">关闭其它</dd>
                        <dd data-type="all">关闭全部</dd></dl>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe th:src='@{/welcome}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                    </div>
                </div>
                <div id="tab_show"></div>
            </div>
        </div>
        <div class="page-content-bg"></div>
        <style id="theme_style"></style>
        <!-- 右侧主体结束 -->
        <!-- 中部结束 -->

    </body>

    <script>
        $(document).ready(function () {
            function Menu(elmId, userId) {
                this.elmId = elmId || "nav";
                this.userId = userId || "";
                this.permission = [];
                this.menuItemRight = '<i class="iconfont nav_right">&#xe697;</i>';
                this.menuItemTemplate = ""
                    + '<li>'
                    + ' <a onclick="xadmin.add_tab(\'{{menu_title}}\',\'{{menu_href}}\')">'
                    + '     <i class="iconfont">{{menu_icon}}</i>'
                    + '     <cite>{{menu_name}}</cite>'
                    + ' </a>'
                    + ' {{sub_menu}}'
                    + '</li>';
                this.menuParentTemplate = ""
                    + '<li>'
                    + ' <a>'
                    + '     <i class="iconfont">{{menu_icon}}</i>'
                    + '     <cite>{{menu_name}}</cite>'
                    + '     {{menu_right}}'
                    + ' </a>'
                    + ' {{sub_menu}}'
                    + '</li>';
                this.subMenu = '<ul class="sub-menu">'
                    + ' {{sub_menu_list}}'
                    + '</ul>';
            }

            Menu.prototype = {
                init: function (elmId, userId) {
                    elmId = elmId || this.elmId;
                    userId = userId || this.userId;
                    var _this = this;
                    _this.getMenuData(userId).then(function (res) {
                        var htmlStr = _this.generateMenu('', _this.permission);
                        $("#" + elmId).html(htmlStr);
                    });
                },
                getMenuData: function (userId) {
                    var _this = this;
                    return new Promise(function (resolve, reject) {
                        $.ajax({
                            url: appPath + '/sys/permission/menu',
                            type: 'post',
                            data: {'userId': userId}
                        }).always(function (res) {

                        }).done(function (res) {
                            if(res.code !='200'){
                                return;
                            }

                            if(res.data.length == 0){
                                $('.left-nav').animate({left: '-221px'}, 100);
                                $('.page-content').animate({left: '-0px'}, 100);
                                $('.page-content-bg').hide();
                                $('.container .left_open i').hide();
                                return;
                            }
                            _this.permission = res.data;
                            if(resolve && typeof resolve == "function"){
                                resolve(res);
                            }
                        }).fail(function (res) {
                            if(reject && reject == "function"){
                                reject(res);
                            }
                        });
                    });
                },
                generateMenu: function (elmId, data) {
                    var htmlStr = "";
                    var _this = this;
                    if(data.length == 0){
                        return;
                    }

                    var parentList = [];
                    data.map(function (item, index) {
                        var isRoot = false;
                        if(item.parentId == -1){
                            isRoot = true;
                        }
                        var menuItemStr = item.children.length > 0 ? _this.menuParentTemplate:_this.menuItemTemplate;
                        menuItemStr = menuItemStr.replace(/{{menu_name}}/, item.title);
                        if(isRoot){
                            menuItemStr = menuItemStr.replace(/{{menu_right}}/, _this.menuItemRight);
                            menuItemStr = menuItemStr.replace(/{{menu_icon}}/, "&#xe6b4;");
                        }else{
                            menuItemStr = menuItemStr.replace(/{{menu_right}}/, "");
                            menuItemStr = menuItemStr.replace(/{{menu_icon}}/, "&#xe6a7;");
                        }
                        var child = "";
                        if(item.children){
                            var childList = _this.generateMenu(elmId, item.children);
                            if(childList){
                                child = _this.subMenu;
                                child = child.replace(/{{sub_menu_list}}/, childList);
                                menuItemStr = menuItemStr.replace(/{{menu_title}}/, "");
                                menuItemStr = menuItemStr.replace(/{{menu_href}}/, "javascript:;");
                            }else{
                                menuItemStr = menuItemStr.replace(/{{menu_title}}/, item.title);
                                menuItemStr = menuItemStr.replace(/{{menu_href}}/, appPath + item.href);
                            }
                        }else{
                            menuItemStr = menuItemStr.replace(/{{menu_title}}/, item.title);
                            menuItemStr = menuItemStr.replace(/{{menu_href}}/, appPath + item.href);
                        }
                        menuItemStr = menuItemStr.replace(/{{sub_menu}}/, child);
                        htmlStr += menuItemStr;
                    });
                    return htmlStr;
                }
            }
            var menu = new Menu("nav", localStorage.userId);
            menu.init();

        });

    </script>
</html>